<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <style type="text/css">
	*{margin: 0;padding: 0;}
	body{
		text-align: center;
		text-align: center;
    	background-color: #f6f6f6;
		
	}
	#main{
       	margin: 0 auto;
		width: 1400px;
		height: 1200px;
		background-image: url("../static/img/background.jpg");
		background-size: 100% auto;
		position: relative;
	}
	#box{
		text-align: center;
		margin:0 auto;
		width: 500px;
		height: 500px;
		border: 5px dashed white;
		border-radius: 30px;
		position: relative;
	}
	#wel{
		color: white;
		font-weight: bold;
		font-size: 50px;
		letter-spacing: 15px;
		margin-bottom: 50px;
		padding-top:30px;
	}
	#upIcon{
		margin-top: 50px;
		cursor: pointer;
	}
	#tips{
		font-weight: bolder;
		font-size: 30px;
		color: white;
		height: 30px;
	}
	.tips{
		height: 30px;
		font-weight: bolder;
		font-size: 25px;
		color: white;
	}
	#yes{
		position: absolute;
		bottom:20px;
		left: 150px;
		width: 200px;
		height: 50px;
		font-size: 20px;
		color: white;
		font-weight: bold;
		background-color: 	#778899;
		border-radius: 5px;
		cursor: pointer;
	}
	#View{
		display: none;
		width: 200px;
		height: 50px;
		font-size: 20px;
		color: white;
		font-weight: bold;
		background-color: 	#778899;
		border-radius: 5px;
		cursor: pointer;
	}
	#clickFile{
		display: none;
	}
	#Table{
		margin: 20px auto;
		width: 1200px;
		border-collapse: collapse;
	}
	#Table tr td{
		font-weight: bold;
		text-align: center;
		font-size: 20px;
		color: white;
		border: 2px solid yellow;
	}
	#tableTitle{
		padding: 20px auto;
		font-weight: bolder;
		font-size: 28;
		color: white;
	}
  </style>
</head>
<body>
	<div id="main">
		<h1 id="wel">DATA VIEW</h1>
		<div id="box">
			<img id="upIcon" src="../static/img/upfile.png">
			<input type="file" id="clickFile">
			<br><br>
			<span id="tips">将文件拖拽进来</span>
			<br><br>
			<span id="fileNameTips" class="tips"></span>
			<br><br>
			<span id="errorTips" class="tips"></span>
			<br><br>
			<button id="yes">确认上传</button>
		</div>
		<br>
		<h1 id="tableTitle">{{title|safe}}</h1>
		<table id="Table">
			{% for row in data %}
				<tr>
					{% for item in row %}
						<td>{{item|safe}}</td>
					{% endfor %}
				</tr>
			{% endfor %}
		</table>
		<form action="/isData" method="get">
			<input type="submit" value="可视化操作" id="View">
		</form>
	</div>
</body>
<script src="../static/js/jquery.js"></script>
<script type="text/javascript">
	var box = document.getElementById("box");
	box.addEventListener('dragenter',drag,false);
	box.addEventListener('dragover',drag,false);
	box.addEventListener('dragleave',drag,false);
	box.addEventListener('drop',drag,false);
	var file;
	function drag(e){
		e.preventDefault();
		switch(e.type){
			case 'dragenter':
				box.style.border = "5px solid white";
				$("#tips").text("释放上传");
				break;
			case 'dragover':
				box.style.border = "5px solid white";
				$("#tips").text("释放上传");
				break;
			case 'dragleave':
				box.style.border = "5px dashed white";
				$("#tips").text("将文件拖拽进来");
				break;
			case 'drop':
				box.style.border = "5px dashed white";
				$("#tips").text("将文件拖拽进来");
				file = e.dataTransfer.files[0];
				if(file.type != "text/plain"){
					$("#errorTips").text("文件必须为txt类型");
				}else{
					if(file.size > 5120000){
						$("#errorTips").text("文件大小不能超过5MB");
					}else{
						console.log(file.type);
						$("#errorTips").text("");
						$("#fileNameTips").text("当前选中文件:"+file.name); 
					}
				}
				break;
		}
	}
	$("#upIcon").click(function(){
		$("#clickFile").click();
	});
	$("#clickFile").change(function(){
		file = this.files[0];
		if(file.type != "text/plain"){
			$("#errorTips").text("文件必须为txt类型");
		}else{
			if(file.size > 5120000){
				$("#errorTips").text("文件大小不能超过5MB");
			}else{
				$("#errorTips").text("");
				$("#fileNameTips").text("当前选中文件:"+file.name); 
			}
		}
	});
	$("#yes").click(function(){
		if(file == null) {
			$("#errorTips").text("未选中文件");
		}else{
			var fileData = new FormData();
			fileData.append("file",file);
			$("#errorTips").text("正在上传...");
			$.ajax({
				url: "/upload",
				data: fileData,
				type: "POST",
				dataType: "json",
				cache: false,//上传文件不缓存
				processData: false,
				contentType: false,
				success:function(result){
					$("#errorTips").text("上传完成");
				}
			}).done(function (data) {
				if (data.data == "数据有异常") {
					$("#Table").html("");
					$("#tableTitle").text("数据有异常");
				}else{
					$("#Table").html("");
					var tableData = data.data;
					var str = "<tr>"
					$("#tableTitle").text("数据源预览");
					for(var i = 0;i < tableData[0].length; i++){
						str += "<td>第"+(i+1)+ "列</td>" 
					}
					str += "</tr>"
					for(var i = 0;i < tableData.length; i++){
							str += "<tr>";
						for(var j = 0;j < tableData[i].length;j++){
							str += ("<td>"+ tableData[i][j] +"</td>");
						}
						str += "</tr>";
					}
					$("#Table").html(str);
					$("#View").show();
				}
				
			});
		}
		
	});

	$(document).ready(function(){ 
     	if($("#tableTitle").text() == "缓存数据预览"){
			$("#View").show();
     	}
	}); 
</script>
</html>